<template>
	<view class="page">
		<view class="banner">
			<image class="banner-img" :src="venueInfo.thumb"></image>
			<view class="banner-title">预约开始时间 : {{venueInfo.start_time}}</view>
		</view>
		<view class="uni-flex uni-row" style="background: #FFFFFF;">
			<view class="uni-flex uni-column" style="flex: 1;box-sizing: border-box;padding: 0 20px;border-bottom: 1px solid #eee;border-right: 1px solid #eee;">
				<text class="article-author">{{venueInfo.name}}</text>
				<text class="article-text">{{venueInfo.address}}</text>
			</view>
			<view class="uni-flex uni-column" style="width: 200px;justify-content: center;align-items: center;box-sizing: border-box;border-bottom: 1px solid #eee;">
				<image style="height: 60px;" mode="aspectFit" src="../../../static/icon_address_navigation.png"></image>
				<text class="article-text">地址导航</text>
			</view>
		</view>
		<view class="article-content">
			<rich-text :nodes="venueInfo.content"></rich-text>
		</view>
	</view>
</template>

<script>
	var util = require('../../../common/util.js');
	export default {
		data() {
			return {
				id: '',
				venueInfo: {},
			}
		},
		onShareAppMessage() {
			return {
				title: this.venueInfo.name,
				path: '/pages/test/venue-detail/venue-detail?id='+this.id
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.initData();
		},
		methods: {
			async initData() {
				let venueData = await this.getDetail();
				this.venueInfo = venueData.data;
				this.venueInfo.content = this.venueInfo.content.replace(/<img/g, "<img style='max-width'");
			},
			getDetail() {
				return new Promise((res) => {
					util.apiPost('Venue/venueInfo', {'venueId':this.id}).then((result) => {
						res(result);
					})
				})
			}
		}
	}
</script>

<style>
	@import "../../../common/uni.css";
	page {
		background: #efeff4;
	}

	.banner {
		height: 360px;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		font-size: 28px;
		line-height: 50px;
		height: 50px;
		color: white;
		z-index: 11;
		background: rgba(0,0,0,.5);
		text-align: center;
	}

	.article-meta {
		padding: 20px 40px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 20px;
		line-height: 50px;
		color: #999999;
	}

	.article-author,
	.article-time {
		font-size: 28px;
	}

	.article-content {
		padding: 10px 30px;
		overflow: hidden;
		font-size: 30px;
		background: #FFFFFF;
	}
</style>
